@font-face {
    font-family: terminus;
    src: url(assets/terminus-ttf-4.49.3/TerminusTTF-4.49.3.ttf);
}

@font-face {
    font-family: terminus-bold;
    src: url(assets/terminus-ttf-4.49.3/TerminusTTF-Bold-4.49.3.ttf);
}



@keyframes link-hover {
    0% {
        color: #5bcefa;
    }

    25% {
        color: #f5a9b8
    }

    50% {
        color: #ffffff
    }

    75% {
        color: #f5a9b8
    }

    100% {
        color: #5bcefa
    }
}

@keyframes link-unhover {
    0% {
        color: currentColor;
    }

    100% {
        color: #5bcefa;
    }
}

@keyframes plural-link-hover {
    0% {
        color: #ff3881;
    }

    25% {
        color: #368fe9;
    }

    50% {
        color: #00cc77;
    }

    75% {
        color: #ffd636;
    }

    100% {
        color: #ff3881;
    }
}

@keyframes plural-link-unhover {
    0% {
        color: currentColor;
    }

    100% {
        color: #ff3881;
    }
}



body {
    background: #110022;
    background-image: url("assets/bg-darkened.png");
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    margin: 0;

    font-family: terminus;
    color: #ffffff;
    text-align: center;
}

b {
    font-family: terminus-bold;
    color: #ff0077;
}

h2 {
    padding: 1rem 0 0;
    color: #00fce3;
}



#eight {
    position: relative;
    width: 50%;
    top: 2em;
    margin: auto;
}

@media (max-width: 860px) {
    #eight {
        width: auto;
    }
}

#bgVideo {
    position: fixed;
    width: 100%;
    height: 100%;
}

#johnvertise {
    position: relative;
    top: 2em;
}

#post {
    text-align: justify;
}

#self-diagnosis {
    width: 20rem;
}

#spin {
    position: relative;
    top: 2em;

    width: 80px;
    height: 112px;
    image-rendering: pixelated;

    display: block;
    margin: auto;
}

#spin-text {
    position: relative;
    top: 1.5em;
}



.panel {
    position: relative;
    top: 0.5em;

    margin: auto;
    margin-bottom: 4em;
    width: auto;
    max-width: 40em;

    background-color: #ffffff11;

    font-size: 1.2em;

    border-radius: 1em;
    padding: 0.075em 1.5em 0.075em 1.5em;
    gap: 0.075em 1.5em 0.075em 1.5em;
}

.panel a {
    color: #5bcefa;
    text-decoration: none;
}

.panel a:link {
    color: #5bcefa;
    animation-name: link-unhover;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
}

.panel a:hover {
    animation-name: link-hover;
    animation-duration: 1.25s;
    animation-iteration-count: infinite;
}



.panel-plural {
    position: relative;
    top: 0.5em;

    margin: auto;
    margin-bottom: 4em;
    width: auto;
    max-width: 40em;

    background-color: #ffffff11;

    font-size: 1.2em;

    border-radius: 1em;
    padding: 0.075em 1.5em 0.075em 1.5em;
    gap: 0.075em 1.5em 0.075em 1.5em;
}

.panel-plural a {
    color: #ff3881;
    text-decoration: none;
}

.panel-plural a:link {
    color: #ff3881;
    animation-name: plural-link-unhover;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
}

.panel-plural a:hover {
    color: currentColor;
    animation-name: plural-link-hover;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}

.panel-plural img {
    width: 18rem;
    border-radius: 1em;
}

.panel-plural table {
    font-size: 1.2rem;
    margin: auto;
    gap: 0.5em;
}

.panel-plural td {
    padding: 0 1em;
}